<template>
	<div class="zco-white-board-pdf-container">
		<p :style="getStyle">{{ getMessage }}</p>
		<template v-if="businessType === 'peer-cmd'">
			<p :style="getStyle">PDF：</p>
			<div @click="preview">
				<FileMessage :fileType="'pdf'" :fileName="fileName" />
			</div>
		</template>
	</div>
</template>
<script>
import ZcoIM from '../../index';
import FileMessage from '@/components/ChatMessage/FileMessage.vue';
import zcoIMEvent from '@/store/event';
export default {
	name: 'APP',
	components: { FileMessage },
	props: {
		businessType: {
			type: String,
			default: () => ''
		},
		toUserRole: {
			type: String,
			default: () => ''
		},
		toUserName: {
			type: String,
			default: () => ''
		},
		fileName: {
			type: String,
			default: () => ''
		},
		fromUserName: {
			type: String,
			default: () => ''
		},
		fileUrl: {
			type: String,
			default: () => ''
		}
	},
	computed: {
		getMessage() {
			return `${
				this.businessType === 'peer-cmd'
					? `向${this.toUserRole === 'customer' ? '访客' : '坐席'} <${this.toUserName}> 发起共享PDF`
					: `结束${this.toUserRole === 'customer' ? '访客' : '坐席'} <${this.toUserName}> 的共享PDF`
			}`;
		},
		getStyle() {
			if ((ZcoIM.agent && this.fromUserName === ZcoIM.agent.userName) || (ZcoIM.client && this.fromUserName === ZcoIM.client.userName)) {
				return 'text-align: right;';
			} else {
				return '';
			}
		}
	},
	data() {
		return {};
	},
	methods: {
		preview() {
			zcoIMEvent.emitPreview({ type: 'pdf', url: this.fileUrl });
		}
	},
	created() {},
	mounted() {}
};
</script>
<style scoped>
.zco-white-board-pdf-container p {
	margin: 0;
}
</style>
